<template>
    <div class="search">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
            size="default" status-icon>
            <header>
                <div class="left">
                    <el-icon style="vertical-align: middle">
                        <Search />
                    </el-icon>
                    <span>筛选搜索</span>
                </div>
                <div>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">重新搜索</el-button>
                </div>
            </header>
            <section>
                <div style="width: 300px;">
                    <el-form-item label="账号/姓名" prop="name">
                        <el-input v-model="ruleForm.name" placeholder="请输入账号、姓名" />
                    </el-form-item>
                </div>

            </section>

        </el-form>
    </div>
</template>
    
<script setup lang='ts'>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
const emit = defineEmits(['seachKey'])
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    name: '',
})
const rules = reactive<FormRules>({
    name: [
        { validator: checkPwd, message: '请输入账号/姓名', trigger: 'blur' },
    ],
})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            emit('seachKey', { keyword: ruleForm.name })
        } else {
            console.log('error submit!', fields)
        }
    })
}
function checkPwd(
    rule: unknown,
    value: string | undefined,
    cb: (msg?: string) => void,
) {
    if (!value) {
        return cb('密码不能为空');
    } else {
        return cb();
    }
}
const resetForm = (formEl: FormInstance | undefined) => {

    if (!formEl) return;
    formEl.resetFields()
    emit('seachKey', ruleForm.name)
}
</script>
    
<style lang="less" scoped >
.search {
    padding: 20px;
    box-shadow: 0 0 20px #ccc;

    header {
        display: flex;
        justify-content: space-between;

        .left span {
            padding-left: 15px;
        }
    }

}
</style>